<template>
  <div>
    <div
      style="display: grid; grid-template-columns: 50% 20% 30%; padding: 10px"
    >
      <my-input
        v-model="article.title"
        placeholder="标题"
        :disabled="!editVisible"
      >
        <my-select
          dict="ARTICLE_TYPE_DICT"
          style="width: 100px"
          :disabled="!editVisible"
          v-model="article.type"
          slot="prepend"
          placeholder="类型"
        ></my-select>
      </my-input>
      <div>
        <span
          style="
            color: #f56c6c;
            font-size: 12px;
            line-height: 28px;
            padding-left: 10px;
          "
          v-show="valid"
          >* 请选择类型并输入标题</span
        >
      </div>
      <div style="text-align: right">
        <my-button v-show="!editVisible" @click="handleEdit">编辑</my-button>
        <my-button v-show="editVisible" @click="saveArticle">保存</my-button>
      </div>
    </div>
    <div id="editor">
      <mavon-editor
        @save="saveArticle"
        class="mavon-editor"
        :subfield="editVisible"
        :defaultOpen="defaultOpen"
        :tabSize="2"
        :toolbarsFlag="false"
        :toolbars="toolbars"
        v-model="article.content"
      ></mavon-editor>
    </div>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  name: 'article-detail',
  components: {
    MavonEditor: mavonEditor
  },
  data() {
    return {
      article: {
        id: 0,
        title: "",
        type: "",
        content: "",
      },
      valid: false,
      editVisible: false,
      defaultOpen: "preview",
      toolbars: {},
    };
  },
  methods: {
    saveArticle() {
      if (
        this.article.type != null &&
        this.article.type + '' !== '' &&
        this.article.title != null &&
        this.article.title.trim() !== ''
      ) {
        this.valid = false;
        if (!this.article.content) {
          this.$notify.warning("文章内容不能为空!");
          return;
        }
        this.$ajax.saveArticle(this.article).then(() => {
          this.$message.success("保存成功");
          this.toolbars = {
            subfield: false, // 单双栏模式
          };
          this.editVisible = false;
        });
      } else {
        this.valid = true;
      }
    },
    handleEdit() {
      this.editVisible = true;
      this.toolbars = {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: false, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: false, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: false, // 帮助
        /** 1.3.5 **/
        undo: true, // 上一步
        redo: false, // 下一步
        trash: false, // 清空
        save: false, // 保存（触发events中的save事件）
        /** 1.4.2 **/
        navigation: false, // 导航目录
        /** 2.1.8 **/
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /** 2.2.1 **/
        subfield: true, // 单双栏模式
        preview: true, // 预览
        boxShadow: false,
      };
    },
  },
  mounted() {
    this.article.id = this.$route.params.id;
    this.$ajax.getArticleById(this.article.id).then((res) => {
      this.article.title = res.title;
      this.article.type = res.type;
      this.article.content = res.content;
    });
  },
};
</script>

<style lang="scss" scoped>
::v-deep.article-title input {
  width: 500px;
  border: none;
  border-bottom: 1px solid #d9d9de;
  border-radius: 0px;
  height: 10vh;
  line-height: 10vh;
  padding: 10px;
}
#editor {
  height: 79vh;
  overflow-y: auto;
  padding: 5px 10px;
}
.mavon-editor {
  height: 100%;
  width: 100%;
}
</style>
